<template>
  <section class="wrapper" :style="{backgroundImage: `url(${bg})`}">
    <section class="user-info">
      <img class="avatar" src="../assets/images/user-avatar.png" alt="">
      <section>{{ userInfo.name }}</section>
    </section>
    <section class="nav-list">
      <router-link to="/message" class="nav-item">
        <section>
          <img src="../assets/images/message.png" alt="">
          消息中心
        </section>
        <img src="../assets/images/arrow-right.png" alt="">
      </router-link>
      <section @click="logout" class="nav-item">
        <section>
          <img src="../assets/images/log-out.png" alt="">
          退出登录
        </section>
        <img src="../assets/images/arrow-right.png" alt="">
      </section>
    </section>
  </section>
</template>
<script>
  import {ajax} from 'jquery'
  import bg from '../assets/images/top-bg.png'
  export default {
    name: 'Message',
    data: () => ({
      bg,
      userInfo: {},
    }),
    created() {
      this.userInfo = this.$storage.getData('userInfo')
    },
    methods: {
      logout() {
      	layer.confirm('确定退出吗？', (index) => {
		      localStorage.clear()
		      this.$router.push('/login_code')
					layer.close(index)
				})
      }
    }
  }
</script>
<style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wrapper {
    -webkit-background-size: 100% 8.587rem;
    background-size: 100% 8.587rem;
    background-position: 0 0;
    background-repeat: no-repeat;
  }
  .user-info {
    margin: 0 0.4rem;
    height: 3rem;
    margin-bottom: 0.667rem;
    margin-top: 3.867rem;
    background-color: #ffffff;
    box-shadow: 0rem 0rem 0.853rem 0rem
    rgba(25, 23, 132, 0.16);
    border-radius: 0.187rem;
    text-align: center;
    font-size: 0.48rem;
    font-weight: bold;
    color: #000000;
    .avatar {
      display: block;
      margin: 0 auto;
      transform: translateY(-0.88rem;);
      width: 1.827rem;
    }
  }
  .nav-list {
    margin: 0 0.4rem;
    .nav-item {
      margin-bottom: 0.4rem;
      padding: 0 0.32rem;
      .flex;
      justify-content: space-between;
      height: 1.333rem;
      background-color: #ffffff;
      border-radius: 0.187rem;
      section {
        .flex;
        font-size: 0.373rem;
        color: #333333;
        img {
          margin-right: 0.267rem;
          width: 0.88rem;
          height: 0.88rem;
          box-shadow: 0rem 0rem 0.267rem 0rem
          rgba(15, 138, 249, 0.35);
          border-radius: 50%;
        }
      }
      & > img {
        width: 0.2rem;
      }
    }
  }
</style>
